<template>
  <div>
    <el-form :model="formlist" ref="userForm" :rules="rules" label-width="100px">
         <el-form-item label="banner图">
            <el-upload
       action=""
       :http-request="Upload"
       :data="Aliyun"
       :multiple="false"
       :show-file-list="true"
       list-type="picture-card"
        :file-list="fileList"
       :on-preview="handlePictureCardPreview"
       :on-remove="handleRemove"
       :limit="1"
      >
         <i class="el-icon-plus" />
         </el-upload>
         <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
         </el-dialog>
        </el-form-item>

      <el-form-item label="标题" prop="title" >
        <el-input v-model="formlist.title" placeholder="选择我们的理由"></el-input>
      </el-form-item>
       <el-form-item label="链接" prop="link" >
    <el-input v-model="formlist.link" placeholder="http://www........"></el-input>
  </el-form-item>
      <el-form-item label="是否启用" >
        <el-radio-group v-model="formlist.status">
      <el-radio :label='true'>是</el-radio>
      <el-radio :label='false'>否</el-radio>
    </el-radio-group>
  </el-form-item>
    <el-form-item label="排序" prop="order">
        <el-input v-model="formlist.order"></el-input>
      </el-form-item>
    </el-form>
     <div slot="footer" class="dialog-footer">
    <el-button size="small" @click="quxiao">取 消</el-button>
    <el-button size="small" type="primary" @click="queding">确 定</el-button>
  </div>
  </div>
</template>

<script>
import {ossmessage,ossuploading } from '@/api/oss'
import { client } from '@/components/Hamburger/ossss'
import ossUpload from '@/components/Hamburger/oss'
import {banneradd, bannerupdate} from '@/api/user'
export default {
  props:{
     isedit: {
      type: Boolean,
      required: true
    },
        childata:{
      type: Object,
      require: true
    },
  },
data () {
  return {
          dialogVisible:false,
          dialogImageUrl: '',

          Aliyun: {}, // 存签名信息
          progress: 0, // 进度条
          imgUrl: [], // 存上传后的图片url
          toolbarConfig:'',
         IA_inputw:'',
  	 		editor: null, //实例
        editorConfig: {
               placeholder: '请输入内容...',

      MENU_CONF: {
            uploadImage: {
                customUpload:    //自定义上-oss
                    async (file, insertFn) => {
                        const resultUrl = await ossUpload(file, file.name)
                        insertFn(resultUrl)
                    }
                   }
               }

           },
    formlist:{
      status:true,
      bannerUrl:'',
      title:'',
      order:'',
      link:''
    },
    fileList:[],
    options:[],
      rules:{
    title:[
       { required: true, message: '标题不能为空', trigger: 'blur' },
    ],
      order:[
       { required: true, message: '排序不能为空', trigger: 'blur' },
      
    ],
   }
  }
},
created(){
 this.loafigthel()
 this.loatypech()
},
methods:{
       loatypech(){
     if(this.isedit == true){
       this.formlist = this.childata
     this.fileList.push({'url':this.childata.bannerUrl})
     }
       },
  
     async loafigthel() {
          const { data } = await ossmessage({
        'ossGroup':'CommodityMainImages'
      })
          this.Aliyun = data
          // console.log(this.Aliyun);
          },
            // 上传图片
  Upload(file) {
   const that = this
   // 判断扩展名
   const tmpcnt = file.file.name.lastIndexOf('.')
   const exname = file.file.name.substring(tmpcnt + 1)
   const names = ['jpg', 'jpeg', 'png','webP']
   if (names.indexOf(exname) < 0) {
    this.$message.error('不支持的格式!')
    return
   }
   if (file.size > 1024 * 1024) {
    this.$message.error('图片大小最大1M')
    return
   }
  
   async function multipartUpload() {
    const listdata = await ossuploading({
      'fileName':'.jpg','ossGroup':'CommodityMainImages'
    })
     let fileName = listdata.data.path
    //  console.log('741',fileName);
    //  console.log('999',file);
    client(that.Aliyun).put(fileName, file.file,
     {
      progress: function(p) { // 获取进度条的值
      //  console.log('777',p)
       that.progress = p * 100
      }
     }).then(
     result => {
      // 下面是如果对返回结果再进行处理，根据项目需要
      // console.log(result)
      // that.imgUrl = 'http://' + result.bucket + '.' + that.Aliyun.endpoint + '/' + result.name
      that.dialogImageUrl = result.url
      that.formlist.bannerUrl = that.dialogImageUrl
        
      that.imgUrl.push({
       name: file.file.name,
       url: result.url
      })
       that.fileList.push( {'url': result.url,})
   
     })
   }
   multipartUpload()
  },
  // 图片预览
  handlePictureCardPreview(file) {
   this.dialogImageUrl = file.url
   this.dialogVisible = true
  },
  // 删除图片
  handleRemove(file, fileList) {
   // console.log(file)
   for (var i in this.imgUrl) {
    if (this.imgUrl[i].name === file.name) {
     this.imgUrl.splice(i, 1)
    }
   }
      for (let i in this.fileList) {
     if (this.fileList[i].uid == file.uid) {
     this.fileList.splice(i, 1)
    }
    
   }
  //  console.log(this.imgUrl);
  },

  // 取消
  quxiao(){
    this.$emit('close')
  },
  // 确定
 async queding(){
    this.$refs.userForm.validate(async (valid) => {
        if(!valid) return
        try { 
  if(this.isedit == false){
    const res = await banneradd(this.formlist)
     this.$message.success(res.msg)
  } else{
    // this.formlist.bannerUrl = this.fileList[0].url
    const res = await bannerupdate(this.formlist)
    this.$message.success(res.msg)
  }
   } catch(e){
    this.$message.error(e.msg)
   }
    this.$emit('close')
    this.$refs.pwdFormRef.resetFields()
    })
  }
}
}
</script>

<style scoped>
.dialog-footer{
 width: 45%;
 margin-left: 70%;
 margin-top: 20px;
}
.el-form{
  margin-right: 32px;
}
::v-deep .el-upload--picture-card{
    width: 100px !important;
    height: 100px !important;
    line-height: 110px !important;
}
::v-deep .el-upload-list__item{
        width: 100px !important;
    height: 100px !important;
    line-height: 110px !important;
}
</style>